<link href="../../plugins/coreui/coreui.css" rel="stylesheet" />
<link href="../../css/admin.css" rel="stylesheet" />
<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css" type="text/css">
<div class="box">
	<div>
		<form>
			<input type="hidden" id="id" name="id" value="${model.id}" />
			<div class="col-m-12">
				<label for="name" class="col-m-2 text-right">名称：</label>
				<div class="col-m-10">
					<input type="text" id="name" name="name" class="form-input" value="${model.name}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="code" class="col-m-2 text-right">代码：</label>
				<div class="col-m-10">
					<input type="text" id="code" name="code" class="form-input" value="${model.code}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="parent_id" class="col-m-2 text-right">父菜单：</label>
				<div class="col-m-10">
					<input type="hidden" id="parent_id" name="parent_id" value="${model.parent_id}" />
					<input type="text" value="${model.parentName}" id="parent_name" class="form-input" readonly onclick="showMenu();" />
					<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
						<ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
					</div>
				</div>
			</div>
			<div class="col-m-12">
				<label for="url" class="col-m-2 text-right">链接：</label>
				<div class="col-m-10">
					<input type="text" id="url" name="url" class="form-input" value="${model.url}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="seq" class="col-m-2 text-right">显示顺序：</label>
				<div class="col-m-10">
					<input type="text" id="seq" name="seq" class="form-input" value="${model.seq}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="status" class="col-m-2 text-right">状态：</label>
				<div class="col-m-10">
					<select id="status" name="status" class="form-select">
						<option ${model.status==1?"selected='selected'":""} value="1">启用</option>
						<option ${model.status==0?"selected='selected'":""} value="0">隐藏</option>
					</select>
				</div>
			</div>
		</form>
	</div>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="../../plugins/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="../../plugins/ztree/jquery.ztree.excheck.min.js"></script>

<script>
	$(function(){
		
		$.post("getMenuJson",{"showButton":false},function(data){
			data.push({"id":0,"name":"无父菜单"});
			data.reverse();
			$.fn.zTree.init($("#treeDemo"), setting, data);
		});
		

	});
	var setting = {  
			check: {
				enable: true,
				chkboxType: {"Y":"", "N":""},
				chkStyle: "radio",
				radioType: "all"
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			},
			view: {
				selectedMulti: false
			}
		};  
	function beforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}
	
	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
		nodes = zTree.getCheckedNodes(true),
		v = "",
		n="";
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].id;
			n += nodes[i].name;
		}
		$("#parent_id").val(v);
		$("#parent_name").val(n);
	}

	function showMenu() {
		var obj = $("#parent_name");
		var objOffset = $("#parent_name").offset();
		$("#menuContent").css({left:objOffset.left + "px", top:objOffset.top + obj.outerHeight() + "px",background:"white",padding:"5px"}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "parent_name" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
</script>